<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>txt的值为：{{txt}}</h1>
        <input type="text" placeholder="请输入内容" v-model="txt" />
        <p>desc的值为:{{desc}}</p>
        <textarea v-model="desc" cols="30" rows="10"></textarea>
        <hr />
        <p>当前的性别为：{{gender}}</p>
        性别：<label><input type="radio" v-model="gender" value="女" />女</label>
        <label><input type="radio" v-model="gender" value="男" />男</label>
        <hr />
        <p>我的最爱：{{favs}}</p>
        <label><input type="checkbox" v-model="favs" value="电影" />电影</label>
        <label><input type="checkbox" v-model="favs" value="电视剧" />电视剧</label>
        <label><input type="checkbox" v-model="favs" value="综艺" />综艺</label>
        <label><input type="checkbox" v-model="favs" value="音乐" />音乐</label>
        <hr />
        <label><input type="checkbox" v-model="isAccept" />是否接受</label>
        <hr />
        <p>前面{{msg}}后面</p>
        <input type="text" placeholder="输入内容" v-model.trim="msg" />
        <hr />
        <input type="text" v-model.number="a" />+<input type="text" v-model.number="b" />={{a + b}}
        <ul>
            <!-- 属性值循环渲染元素或组件 -->
            <li v-for="item in items" :key="item.id">
                {{item.text}}
            </li>
        </ul>
        <p v-if="showMessage">Hello Vue!</p>
        <p v-else>Gooby Vue!</p>
        
    </div>
    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const modelApp = {
            data() {
                return {
                    txt: '123',
                    desc: '',
                    gender: '男',
                    favs: [],
                    isAccept: false,
                    msg: '',
                    a: 1,
                    b: 2,
                    showMessage: false,
                    items: [
                        { id: 1, text: 'Item1' },
                        { id: 2, text: 'Item2' },
                        { id: 3, text: 'Item3' }
                    ],
                };
            }
        }

        Vue.createApp(modelApp).mount('#app')
    </script>
</body>

</html>